<template>
  <section>
    <!-- 其他操作 -->
    <section style="margin-bottom: 20px">
      <template v-for="item in handler_config">
        <el-button
          :type="item.type"
          :key="item.index"
          v-bind="{ ...item }"
          @click="
            item.handler(
              {
                pageNum: table_config.pagination_config.pageNum,
                pageSize: table_config.pagination_config.pageSize,
                ...form_data,
              },
              multipleSelection
            )
          "
          >{{ item.label }}</el-button
        >
      </template>
    </section>

    <!-- 列表 -->
    <section>
      <el-table
        ref="table"
        :border="table_config.border"
        :data="table_data"
        :stripe="table_config.stripe"
        :height="table_config.height"
        :max-height="table_config.maxHeight"
        :size="table_config.size"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        @sort-change="sortChange"
        :default-sort="table_config.defaultSort"
      >
        <!-- template循环的时候不需要key值 -->
        <template v-for="item in this.table_config.thead">
          <!-- 多选列 -->
          <el-table-column
            v-if="item.type == 'selection'"
            type="selection"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            v-bind="{ ...item }"
            :show-overflow-tooltip="table_config.showOverflowTooltip"
          >
          </el-table-column>

          <!-- 序号 -->
          <el-table-column
            v-else-if="item.type == 'index'"
            type="index"
            :key="item.prop"
            :label="item.label"
            v-bind="{ ...item }"
            :show-overflow-tooltip="table_config.showOverflowTooltip"
          >
          </el-table-column>
          
          <!-- 列的类型为function ，适用于一些禁用启用的字体展示-->
          <el-table-column
            v-else-if="item.type == 'function'"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            v-bind="{ ...item }"
            :show-overflow-tooltip="table_config.showOverflowTooltip"
          >
            <template slot-scope="scope">
              <!-- 下面的渲染也可以写成v_html形式，这样就可以识别一些换行符，callback的参数把当前行，以及当前字段都返回了 -->
              <!-- <span v-html="item.callback && item.callback(scope.row, scope.row[item.prop])"></span> -->
              <span>{{
                item.callback && item.callback(scope.row, scope.row[item.prop])
              }}</span>
            </template>
          </el-table-column>

          <!-- 当使用插槽的时候， 适用于一些其他标签在表格中的展示 -->
          <el-table-column
            v-else-if="item.type == 'slot'"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            v-bind="{ ...item }"
            :show-overflow-tooltip="table_config.showOverflowTooltip"
          >
            <template slot-scope="scope">
              <slot :name="item.slotName" :row="scope.row"></slot>
            </template>
          </el-table-column>

          <!-- 为普通文本的时候 -->
          <el-table-column
            v-else
            :key="item.prop"
            :label="item.label"
            v-bind="{ ...item }"
            :show-overflow-tooltip="table_config.showOverflowTooltip"
          ></el-table-column>
        </template>
      </el-table>
    </section>
    <!-- 分页 -->
    <section
      class="pagination-container"
      v-if="table_config.pagination_config.isShow"
    >
      <el-pagination
        v-if="table_config.pagination_config.total > 0"
        :background="table_config.pagination_config.background"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="table_config.pagination_config.pageNum"
        :page-sizes="table_config.pagination_config.pageSizes"
        :page-size="table_config.pagination_config.pageSize"
        :layout="table_config.pagination_config.layout"
        :total="table_config.pagination_config.total"
        :prev-text="table_config.pagination_config.prevText"
        :next-text="table_config.pagination_config.nextText"
        :small="table_config.pagination_config.small"
      >
      </el-pagination>
    </section>
  </section>
</template>

<script>

export default {
  name: "Table",
  props: {
    data: {
      type: Array,
      default: () => {},
    },
    config: {
      type: Object,
      default: () => {},
    },
    handlerBtnConfig: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    // this.loadData();
  },
  beforeMount() {},
  data() {
    return {
      table_data: [],
      // 下面是列表的配置文件
      table_config: {
        showOverflowTooltip: true, // 是否超出隐藏
        border: true, // 是否有边框
        stripe: false, // 是否显示斑马线形式
        height: undefined, // 表格高度
        maxHeight: undefined, // 表格的最大高度
        size: 'small', // 表格大小
        defaultSort: undefined, // 排序的默认规则  defaultSort: { prop: "infoId", order: "descending" },
        thead: [
          // 表头的配置项
          {
            // lable: "", // 表头文字
            // porp: "", // 对应的prop
            // type: "", // type有function(回调形式,用于处理由0,1或者true,false展示的禁用启用等其他文字) slot(自定义插槽) selection(多选框),如果需要需要的话,可以通过回调的形式处理
            // slotName: "", // 当type为slot时,改字段为必填,
            // width: "", // 宽度
            // align: "", // 对齐方式
            // fixed: "", // 是否固定
            // sortable: "",  // 三种模式,默认为false  false 不排序 true当前数据进行拍序  custom 自定义排序方法与sort-change一起使用,
          },
        ],
        pagination_config: {
          // 下面是分页的配置
          isShow: true, // 是否展示
          background: true, // 是否展示背景色
          small: false, // 是否为小型分页
          prevText: "", // 上一页箭头可以替换的文字
          nextText: "", // 下一页箭头可以替换的问题
          pageSize: 10,
          pageNum: 1,
          pageSizes: [10, 20, 30, 40, 50], // 选择分页请求的个数
          layout: "total, sizes, prev, pager, next, jumper", // 分页的全部功能
          total: 0,
        },
      },
      loading: false,
      multipleSelection: [],
      form_data: {}, // 搜索表单
      handler_config: [], // 操作按钮的配置
    };
  },
  methods: {
    // 初始化table数据
    initData(data) {
      this.table_data = data
    },
    // 初始化table配置
    initConfig() {
      for (let key in this.config) {
        if (Object.keys(this.table_config).includes(key)) {
          if (key == "pagination_config") {
            this.table_config[key] = {
              ...this.table_config[key],
              ...this.config[key],
            };
          } else {
            this.table_config[key] = this.config[key];
          }
        }
      }
    },
    // 获取列表
    loadData(paramsData = {}) {
      this.loading = true;
      let params = {};
      // 下面处理一下请求的参数
      // 如果分页存在的话 加上分页参数
      if (this.table_config.pagination_config.isShow) {
        params = {
          ...params,
          ...{
            pageSize: this.table_config.pagination_config.pageSize,
            pageNum: this.table_config.pagination_config.pageNum,
          },
        };
      }
      // 如果排序存在的话,加上默认排序参数
      if (this.table_config.defaultSort) {
        params = {
          ...params,
          ...{
            sort: this.table_config.defaultSort.prop,
            sortType: this.table_config.defaultSort.order,
          },
        };
      }
      // 处理传进来的参数
      params = { ...params, ...paramsData };
      this.loading = false
    },
    // pageSize改变
    handleSizeChange(val) {
      this.table_config.pagination_config.pageSize = val;
      this.loadData();
    },
    // pageNum改变
    handleCurrentChange(val) {
      this.table_config.pagination_config.pageNum = val;
      this.loadData();
    },
    // 多选事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 远程排序事件
    sortChange({ prop, order }) {
      this.loadData({
        sort: prop,
        sortType: order,
      });
    },
    // 搜索事件
    search() {
      this.table_config.pagination_config.pageNum = 1;
      this.loadData();
    },
    // 重置事件
    reset() {
      // 重置之后，页码为初始页码,如果没有传，那就使用默认值为1
      this.table_config.pagination_config.pageNum =
        this.config.pagination_config.pageNum || 1;
      // 重置排序条件,如果有排序的话就重置，没有的话就清空
      if (this.table_config.defaultSort) {
        this.$refs.table.sort(
          this.table_config.defaultSort.prop,
          this.table_config.defaultSort.order
        );
      } else {
        this.$refs.table.clearSort();
      }

      this.loadData();
    },
  },
  watch: {
    // 下面是进行初始化设置，以及初始化form_data数据。必须设置immediate为true,这样我们才可以在created钩子函数中，使用初始值
    data: {
      handler(newVal) {
        this.initData(newVal);
      },
      immediate: true,
      deep: true,
    },
    config: {
      handler(newVal) {
        this.initConfig(newVal);
      },
      immediate: true,
      deep: true,
    },
    handlerBtnConfig: {
      handler(newVal) {
        this.handler_config = newVal;
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.pagination-container {
  text-align: right;
  margin: 20px;
}
</style>
